<template>
    <div class="figure-table-details">
        <div class="page2">
            <h3>数据详情</h3>

            <div class="page1">
                <div class="search-box">
                    <my-select 
                        class="short" 
                        placeholder="请选择时间类型" 
                        :clearable="false" 
                        v-model="pgdata.timeType" 
                        :props="{value:'value',label:'label'}"
                        :data="timeOptions" 
                        @select='clickHeader'
                    ></my-select>

                    <my-select 
                        class="short" 
                        placeholder="全部地区" 
                        v-model="pgdata.cityType" 
                        :data="cities"
                        :props="{value:'valueid',label:'valuename'}" 
                        2way="cityName" 
                        :cityName.sync="pgdata.cityName" 
                        @select='clickHeader'
                    ></my-select>

                    <my-select 
                        placeholder="全部行业" 
                        v-model="pgdata.hyType" 
                        :url="`${$store.state.api.tbUrl}/searchrelated/getindustries.json`"
                        :props="{value:'valueid',label:'valuename'}" 
                        2way="hyName" 
                        :hyName.sync="pgdata.hyName" 
                        @select='clickHeader'
                    ></my-select>
                </div>

                <div class="figure">
                    <item-layout title="近3年 项目总额分析">
                        <project-amount 
                            v-if="pgdata.timeType !== 'year'" 
                            :options="amountObj" 
                            :isZoom="false" 
                            botGrid="12%" 
                            unitType='amout'
                        ></project-amount>

                        <project-amount-year 
                            v-if="pgdata.timeType === 'year'" 
                            :options="amountObj" 
                            :isZoom="false" 
                            botGrid="12%" 
                            unitType='amout'
                        ></project-amount-year>
                    </item-layout>

                    <item-layout title="近3年 项目数量分析">
                        <project-amount 
                            v-if="pgdata.timeType !== 'year'" 
                            :options="numObj" 
                            :isZoom="false" 
                            botGrid="12%" 
                            unitType='num'
                        ></project-amount>

                        <project-amount-year 
                            v-if="pgdata.timeType == 'year'" 
                            :options="numObj" 
                            :isZoom="false" 
                            botGrid="12%" 
                            unitType='num'
                        ></project-amount-year>
                    </item-layout>
                </div>

                <!-- 列表 -->
                <div class="table">
                    <div class="table-left">
                        <loop-table 
                        title="招标排行榜" 
                        :proPgdata="proPgdata" 
                        :action="`${$store.state.api.ecUrl}/echarts/gettender.json`" 
                        ref="loopTable"
                        @clickHandler="openHandler"
                        >
                            <div class="table-search">
                                <el-radio-group 
                                v-model="proPgdata.sortname" 
                                size="mini" 
                                class="re-radio" 
                                @change="clickTable"
                                >
                                    <el-radio-button 
                                    label="winbidamount"
                                    >
                                        <span style="font-size:14px;">金额</span>
                                    </el-radio-button>

                                    <el-radio-button 
                                    label="winbidnum"
                                    >
                                        <span style="font-size:14px;">次数</span>
                                    </el-radio-button>
                                </el-radio-group>

                                <div 
                                class="radio-tips" 
                                v-if="pgdata.timeType === 'mon'"
                                >
                                    排行榜时间最小是按季度进行排序
                                </div>
                            </div>
                        </loop-table>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
import { mapActions } from 'vuex';

import itemLayout from './components/item-layout.vue';
import projectAmount from './charts/project-amount.vue';
import projectAmountYear from './charts/project-amount-year.vue';
import loopTable from './components/loop-table.vue';

export default {
    name: '',
    components: { itemLayout, projectAmount, projectAmountYear, loopTable },
    layout: 'client',

    data() {
        return {
            //图
            amountObj: {}, //金额
            numObj: {}, //项目
            pgdata: {
                timeType: 'year', // year , mon , quarter 季度
                cityType: '',
                hyType: '',
                cityName: '',
                hyName: '',
            },
            
            timeOptions: [
                { value: 'year', label: '年' },
                { value: 'quarter', label: '季度' },
                { value: 'mon', label: '月' },
            ],
            //表格
            proPgdata: {
                pageindex: 1,
                pagesize: 10,
                time: 'year',
                cityid: '',
                hycode: '',
                sortname: 'winbidamount', //winbidnum -- 按数量 ,winbidamount--按金额
            },
        };
    },
    computed: {
        cities() {
            return this.$store.getters['city/getCitiesByProvinceCode']('130000');
        },
    },
    watch: {},
    methods: {
        ...mapActions({
            queryCity: 'city/queryCities',
        }),
        int() {
            var that = this;
            this.reData();
            this.getdetails();
            this.getAmount();
           
            setTimeout(function(){
                that.$refs.loopTable.clickTable();
            }, 300)
            
        },
        getdetails() {
            this.pgdata.timeType = this.getQuery('mon') || '';
            this.pgdata.cityType = this.getQuery('area') || '';
            this.pgdata.hyType = this.getQuery('industry') || '';
            this.proPgdata.cityid = this.getQuery('area') || '';
            this.proPgdata.hycode = this.getQuery('industry') || '';
            if (this.getQuery('mon') == 'mon') {
                this.proPgdata.time = 'quarter';
            } else {
                this.proPgdata.time = this.getQuery('mon') || '';
            }
        },
        reData() {
            this.amountObj = {};
            this.numObj = {};
        },

        //  项目总额 项目数量
        getAmount() {
            let that = this;
            //区域 行业 不同，url 标题。
            let url = `${that.$store.state.api.ecUrl}/echarts/getallpro.json`;

            that.$get(url, this.pgdata, (data) => {
                // 数据 amountValue 金额    numValue 数量
                if (this.pgdata.timeType == 'year') {
                    that.amountObj = clone(data);
                    that.amountObj.isYear = true;
                    that.amountObj.label = [];
                    that.amountObj.seriesValue = that.amountObj.amountValue.map((item) => {
                        return item.data[0];
                    });
                    //seriesValue 改成一个数组。

                    that.numObj = clone(data);
                    that.numObj.isYear = true;
                    that.numObj.label = [];
                    that.numObj.seriesValue = that.numObj.numValue.map((item) => {
                        return item.data[0];
                    });
                } else {
                    that.amountObj = clone(data);
                    that.amountObj.isYear = false;
                    that.amountObj.seriesValue = that.amountObj.amountValue;
                    that.numObj = clone(data);
                    that.numObj.isYear = false;
                    that.numObj.seriesValue = that.numObj.numValue;

                    delete that.amountObj.numValue;
                    delete that.numObj.amountValue;
                }
            });
        },

        // 图表 选择框 变化
        clickHeader() {
            this.$router.push(`${this.$route.path}?mon=${this.pgdata.timeType}&area=${this.pgdata.cityType}&industry=${this.pgdata.hyType}`);

            setTimeout(() => {
                this.int();
            }, 200);
        },

        //下边表格 ，点击切换。
        clickTable() {
            this.$refs.loopTable.clickTable();
        },

        // 查看具体分析
        openHandler(val) {
            let targetPath = `/portraits?guid=${val.guid}&company=${val.name}`;
            let routeData = this.$router.resolve({
                path: targetPath,
            });
            window.open(routeData.href, '_blank');
        },
    },
    mounted() {
        this.int();

        this.queryCity();
    },
};
</script>

<style scoped lang="scss">
.figure-table-details {
    .page2 {
        width: 1200px;
        margin: 0 auto;
        margin-top: 10px;
        padding: 20px;
        background-color: #fff;
        & > h3 {
            margin-bottom: 15px;
        }
        .short {
            margin-right: 10px;
            ::v-deep .el-input__inner {
                width: 120px !important;
            }
        }

        .figure {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-top: 15px;

            & > div {
                width: 560px;
            }
        }
        .areaClass {
            margin: -40px 0 30px;
        }
        .table {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            & > div {
                width: 100%;
            }
            .table-search {
                height: 40px;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                .el-radio-group {
                    margin-right: 10px;
                }
                //单选框 高度
                ::v-deep {
                    .el-radio-button__inner {
                        height: 32px;
                    }
                }
                .radio-tips {
                    height: 32px;
                    font-size: 14px;
                    color: #999;
                    line-height: 44px;
                }
            }
        }
    }
}
</style>
